<template>
  <div class="app-container">
    <el-form v-show="state.showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="套餐标签" prop="tagId">
        <el-select v-model="queryParams.tagId" clearable class="m-2" placeholder="请选择">
          <el-option
            v-for="item in TagOptions"
            :key="item.tagId"
            :label="item.tagName"
            :value="item.tagId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="套餐名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="套餐状态" prop="shelf">
        <el-select v-model="queryParams.shelf" placeholder="请选择" clearable>
          <el-option
            v-for="dict in combo_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="成本价格" prop="minCostPrice">
        <el-input-number
          v-model="queryParams.minCostPrice"
          :min="0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />至
        <el-input-number
          v-model="queryParams.maxCostPrice"
          :min="queryParams.minCostPrice || 0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="原价" prop="minSalePrice">
        <el-input-number
          v-model="queryParams.minSalePrice"
          :min="0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />至
        <el-input-number
          v-model="queryParams.maxSalePrice"
          :min="queryParams.minSalePrice || 0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="设备小程序价" prop="minMiniPrice">
        <el-input-number
          v-model="queryParams.minMiniPrice"
          :min="0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />至
        <el-input-number
          v-model="queryParams.maxMiniPrice"
          :min="queryParams.minMiniPrice || 0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="会员价格" prop="minVipPrice">
        <el-input-number
          v-model="queryParams.minVipPrice"
          :min="0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />至
        <el-input-number
          v-model="queryParams.maxVipPrice"
          :min="queryParams.minVipPrice || 0"
          :max="9999"
          controls-position="right"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          style="width: 360px"
          v-model="queryParams.createTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD"
          time-format="HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item label="城市标签" prop="cityName">
        <el-select @change="init()" v-model="queryParams.cityName" placeholder="请选择">
          <el-option v-for="item in cityNameOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['meal:combo:add']"
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          :disabled="disabled"
          v-hasPermi="['meal:combo:export']"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar v-model:showSearch="state.showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="state.loading" :data="tableList">
      <el-table-column
        label="套餐名称"
        align="center"
        prop="name"
        min-width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="套餐标签"
        align="center"
        prop="tagName"
        min-width="90"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          {{ Array.isArray(scope.row.tagName) ? scope.row.tagName.join(' ，') : scope.row.tagName }}
        </template>
      </el-table-column>
      <el-table-column
        label="城市标签"
        align="center"
        prop="cityName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="成本价(元)"
        align="center"
        prop="costPrice"
        min-width="90"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="原价(元)"
        align="center"
        prop="salePrice"
        min-width="90"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="设备小程序价(元)"
        align="center"
        prop="miniPrice"
        min-width="90"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="会员价(元)"
        align="center"
        prop="vipPrice"
        min-width="90"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="套餐状态" align="center" prop="shelf" min-width="80">
        <template #default="scope">
          <dict-tag :options="combo_status" :value="scope.row.shelf" />
        </template>
      </el-table-column>
      <el-table-column label="团餐状态" align="center" prop="shelf" min-width="80">
        <template #default="scope">
          <dict-tag :options="combo_status" :value="scope.row.groupShelf" />
        </template>
      </el-table-column>
      <el-table-column
        label="保质期(天)"
        align="center"
        prop="expireDay"
        min-width="90"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="创建时间" align="center" prop="createTime" min-width="100" />
      <el-table-column label="操作" align="center" fixed="right" min-width="140">
        <template #default="scope">
          <el-button
            v-hasPermi="['meal:combo:edit']"
            link
            type="primary"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-hasPermi="['meal:combo:onshelf']"
            link
            type="primary"
            @click="handleTableAction(scope.row)"
            >{{ scope.row.shelf === 1 ? '下架' : '上架' }}</el-button
          >
          <el-button
            v-hasPermi="['meal:combo:ongroup']"
            link
            type="primary"
            @click="handleGroupCombo(scope.row)"
            >{{ scope.row.groupShelf === 1 ? '下架团餐' : '上架团餐' }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="state.total > 0"
      :total="state.total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList()"
    />

    <operate ref="operateRef" :operType="state.operType" @updateList="getList()" />
  </div>
</template>

<script setup name="Combo">
import { ElMessage, ElMessageBox } from 'element-plus'
import { getComboList, groupCombo, shelfCombo } from '@/api/meal/combo'
import { getTagComboList } from '@/api/meal/comboTag'
import { getAreaList } from '@/api/organization/area'
import { reactive } from 'vue'
import operate from './templates/operate.vue'
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)
const queryRef = ref(null)
const { proxy } = getCurrentInstance()
const { combo_status } = proxy.useDict('combo_status')

const TagOptions = ref([])
const AreaOptions = ref([])
const state = reactive({
  currentId: null,
  actionType: '',
  dialogTitle: '',
  showSearch: true,
  total: 1,
  loading: false,
  operType: '',
  detailId: '',
  data: {}
})
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: null,
  shelf: null,
  cityName: cityNameOptions.value[0]
})
const tableList = ref([])

function handleSearch(confirm) {
  if (!confirm) {
    queryParams.value.maxCostPrice = null
    queryParams.value.maxCostPrice = null
    queryParams.value.minSalePrice = null
    queryParams.value.maxSalePrice = null
    queryParams.value.minMiniPrice = null
    queryParams.value.maxMiniPrice = null
    queryParams.value.minVipPrice = null
    queryParams.value.maxVipPrice = null
    queryRef.value.resetFields()
  }
  getList(true)
}

async function getList(refresh) {
  state.loading = true
  if (refresh) queryParams.value.pageNum = 1
  try {
    const params = {
      ...queryParams.value,
      createTimeBegin: queryParams.value.createTime?.length ? queryParams.value.createTime[0] : '',
      createTimeEnd: queryParams.value.createTime?.length ? queryParams.value.createTime[1] : ''
    }
    delete params.createTime
    const res = await getComboList(params)
    tableList.value = res.rows
    state.total = res.total
  } finally {
    state.loading = false
  }
}

/**table Action */
function handleAdd() {
  state.operType = 'add'
  state.data = {}
  proxy.$refs['operateRef'].show('add', queryParams.value.cityName)
}
function handleEdit(row) {
  state.operType = 'edit'
  proxy.$refs['operateRef'].show('edit', row.comboId)
}
function handleTableAction(obj) {
  const tipText = obj.shelf === 1 ? '下架' : '上架' //1上架 0下架
  ElMessageBox.confirm('确认要 ' + tipText + '"' + obj.name + '"' + '吗?', '系统提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: false
  })
    .then(() => {
      shelfCombo(obj.comboId).then(() => {
        getList()
        ElMessage.success('操作成功')
      })
    })
    .catch(() => {})
}
function handleGroupCombo(obj) {
  const tipText = obj.groupShelf === 1 ? '下架团餐' : '上架团餐' //1上架 0下架
  ElMessageBox.confirm('确认要 ' + tipText + '"' + obj.name + '"' + '吗?', '系统提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: false
  })
    .then(() => {
      groupCombo(obj.comboId).then(() => {
        getList()
        ElMessage.success('操作成功')
      })
    })
    .catch(() => {})
}

const disabled = ref(false)
function handleExport() {
  disabled.value = true
  proxy
    .download(
      '/goods/combo/export',
      { ...queryParams.value },
      `套餐信息列表${new Date().getTime()}.xlsx`
    )
    .then(() => {
      disabled.value = false
    })
    .catch((err) => {
      disabled.value = false
    })
}

/**init */
function init() {
  //套餐标签
  getTagComboList({ pageNum: 1, pageSize: 9999, cityName: queryParams.value.cityName }).then(
    (res) => {
      TagOptions.value = res.rows
    }
  )
  //区域名称
  // getAreaList({ pageNum: 1, pageSize: 9999 }).then((res) => {
  //   AreaOptions.value = res.rows
  // })

  getList()
}

init()
</script>

<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100px !important;
}
</style>
